

<!--=============================================
=            Hero Area One         =
=============================================-->

<div class="hero-area pt-15 mb-80">
    <div class="container">
        <div class="row">
            {Ns:slide sid='1'}
        </div>

        <div class="row">
            <div class="col-lg-12 pt-40 pb-40">
                <!--=======  feature area  =======-->

                <div class="feature-area">
                    <!--=======  single feature  =======-->

                    <div class="single-feature mb-md-20 mb-sm-20">
                        <span class="icon"><i class="lnr lnr-rocket"></i></span>
                        <p>Fast Shopping <span>Fast shopping online</span></p>
                    </div>

                    <!--=======  End of single feature  =======-->
                    <!--=======  single feature  =======-->

                    <div class="single-feature mb-md-20 mb-sm-20">
                        <span class="icon"><i class="lnr lnr-phone"></i></span>
                        <p>Support 24/7 <span>Contact us 24 hours a day</span></p>
                    </div>

                    <!--=======  End of single feature  =======-->
                    <!--=======  single feature  =======-->

                    <div class="single-feature mb-xxs-20">
                        <span class="icon"><i class="lnr lnr-undo"></i></span>
                        <p>100% Money Back <span>You have 7 days to Return</span></p>
                    </div>

                    <!--=======  End of single feature  =======-->
                    <!--=======  single feature  =======-->

                    <div class="single-feature mb-xxs-20">
                        <span class="icon"><i class="lnr lnr-gift"></i></span>
                        <p>Buy Secure <span>We ensure secure buy</span></p>
                    </div>

                    <!--=======  End of single feature  =======-->
                </div>

                <!--=======  End of feature area  =======-->
            </div>
        </div>
    </div>
</div>

<!--=====  End of Hero Area One  ======-->


<!--=============================================
=            featured categories         =
=============================================-->

<div class="featured-categories mb-80" style="display: none">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center mb-40">
                <div class="section-title">
                    <h2>Featured <span>Categories</span></h2>
                    <p>Show all featured categories with products on home page.</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 mb-sm-30">
                <div class="banner">
                    <a href="shop-left-sidebar.html">
                        <img src="__HOME__images/category-banner/home1-banner1.jpg" class="img-fluid" alt="">
                    </a>
                    <span class="banner-category-title">
							<a href="shop-left-sidebar.html">furniture</a>
						</span>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="row">
                    <div class="col-lg-12 col-md-12 mb-30">
                        <div class="banner">
                            <a href="shop-left-sidebar.html">
                                <img src="__HOME__images/category-banner/home1-banner2.jpg" class="img-fluid" alt="">
                            </a>
                            <span class="banner-category-title">
									<a href="shop-left-sidebar.html">rooms</a>
								</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                        <div class="banner">
                            <a href="shop-left-sidebar.html">
                                <img src="__HOME__images/category-banner/home1-banner3.jpg" class="img-fluid" alt="">
                            </a>
                            <span class="banner-category-title">
									<a href="shop-left-sidebar.html">lighting</a>
								</span>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                        <div class="banner">
                            <a href="shop-left-sidebar.html">
                                <img src="__HOME__images/category-banner/home1-banner4.jpg" class="img-fluid" alt="">
                            </a>
                            <span class="banner-category-title">
									<a href="shop-left-sidebar.html">decor</a>
								</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--=====  End of featured categories  ======-->

<!--=============================================
=            Double row product slider          =
=============================================-->

<div class="double-row-product-slider mb-80">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center mb-40">
                <div class="section-title">
                    <h2>New <span>Collections</span> Of Arrivals</h2>
                    <p>Browse the collection of our new products, You will definitely find what you are looking for.</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <!--=======  top selling product slider container  =======-->
                <div class="ptk-slider double-row-slider-container" data-row = "2" >
                    {volist name='list1' id='vo'}
                    <div class="col">
                        <div class="ptk-product">
                            <div class="image">
                                <a href="{:url('home/product/show')}?id={$vo.id}">
                                    <img src="{$vo.img}" class="img-fluid" alt="">
                                </a>
                                <!--=======  hover icons  =======-->
                                <a class="hover-icon" href="#"><i class="lnr lnr-heart"></i></a>
                                <a class="hover-icon" href="javacript:;" onclick="addToCart({$vo.id},1)"><i class="lnr lnr-cart"></i></a>
                                <div class="product-badge">
                                    <span class="new-badge">NEW</span>
                                </div>
                            </div>
                            <div class="content">
                                <p class="product-title">
                                    <a href="{:url('home/product/show')}?id={$vo.id}">{$vo.title}</a>
                                </p>
                                <!--
                                <p class="product-price">
                                    <span class="main-price discounted">${$vo.cost}</span>
                                    <span class="discounted-price">${$vo.price}</span>
                                </p>
                                -->
                            </div>
                        </div>

                        <!--=======  End of single product  =======-->
                    </div>
                    {/volist}
                </div>

                <!--=======  End of top selling product slider container  =======-->
            </div>
        </div>
    </div>
</div>

<!--=====  End of Double row product slider   ======-->

<!--=============================================
=            Top selling product section         =
=============================================-->

<div class="top-selling-product-area mb-80">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center mb-40">
                <div class="section-title">
                    <h2>Top <span>Selling</span> Products</h2>
                    <p>Browse the collection of our top selling, You will definitely find what you are looking for.</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="ptk-slider top-selling-product-slider-container">
                    {volist name='list2' id='vo'}
                    <div class="col">
                        <div class="ptk-product">
                            <div class="image">
                                <a href="{:url('home/product/show')}?id={$vo.id}">
                                    <img src="{$vo.img}" class="img-fluid" alt="">
                                </a>
                                <!--=======  hover icons  =======-->
                                <a class="hover-icon" href="#"><i class="lnr lnr-heart"></i></a>
                                <a class="hover-icon" href="javacript:;" onclick="addToCart({$vo.id},1)"><i class="lnr lnr-cart"></i></a>
                                <div class="product-badge">
                                    <span class="new-badge">HOT</span>
                                </div>
                            </div>
                            <div class="content">
                                <p class="product-title">
                                    <a href="{:url('home/product/show')}?id={$vo.id}">{$vo.title}</a>
                                </p>
                                <!--
                                <p class="product-price">
                                    <span class="main-price discounted">${$vo.cost}</span>
                                    <span class="discounted-price">${$vo.price}</span>
                                </p>
                                -->
                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>
        </div>
    </div>
</div>

<!--=====  End of Top selling product section  ======-->

